<template>
  <div>
    <div style="height: 0px">
      <label id="labelText" for="">就爱科技</label>

      <!-- <input id="inputText" v-model="input" placeholder="输入关键字开始搜索吧！" type="text" /> -->
      <el-input
        id="inputText"
        placeholder="输入关键字开始搜索吧！"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button
        id="btn1"
        icon="el-icon-search"
        @click="query"
        circle
      ></el-button>
    </div>
    <el-carousel>
      <el-carousel-item v-for="item in carouselData" :key="item.id">
        <div v-if="item.id !== 1">
          <h3>
            <img
              id="carouselImg"
              :src="item.imgPath"
              alt="aaa"
              @click="toArticleDetails(`${item.articleId}`)"
            />
          </h3>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { GetCarousels, queryarticle } from "../../api/index";
export default {
  data() {
    return {
      input: "",
      carouselData: [],
      queryData: [],
    };
  },
  methods: {
    query() {
      var _input = this.input;
      // console.log(_input.length);
      if (_input.trim().length > 0) {
        queryarticle({ query: _input })
          .then((data) => {
            var res = data.data.data;
            // console.log(res.length);
            if(res.length>0){
              this.queryData = data.data.data;
              this.$emit("showMsg",this.queryData);
               this.$message("查询成功");
            }else{
               this.$message.error("未查找到文章，请查询其它内容");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    toArticleDetails(articleId) {
      this.$router.push({
        path: "/articledetails", //页面路径
        query: {
          getArticleId: articleId,
        }, // 参数传值
      });
    },
    getCarouselList() {
      GetCarousels()
        .then((data) => {
          // console.log(data.data);
          var res = data.data;
          if (res.data.article == 0 || res.data.article) {
            this.carouselData = [];
          } else {
            res.data.forEach((e) => {
              e.imgPath =
                "http://localhost:5000/" +
                e.imgPath.slice(e.imgPath.indexOf("files") + 6);
            });
            this.carouselData = res.data;
            // console.log(this.carouselData);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getCarouselList();
  },
};
</script>

<style>
/* 轮播图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

#inputText {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  width: 400px;
  /* height: 30px; */
  position: relative;
  margin-top: 120px;

  z-index: 999;
}
#labelText {
  width: 400px;
  height: 30px;
  position: relative;
  top: 90px;
  font-size: 35px;
  z-index: 998;
}
#btn1 {
  /* width: 400px; */
  /* height: 30px; */
  position: relative;
  margin-left: 450px;
  top: -40px;

  z-index: 998;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
#carouselImg {
  width: 100%;
  object-fit: cover;
}
</style>
